<template>

    <div>

        <h2>常见问题</h2>

        <div class="container">

            <div style="margin-bottom: 20px;">
                <el-button type="default" @click="add">添加问题列表</el-button>
            </div>

            <el-tabs v-model="currentTab" type="card" closable @tab-remove="removeTab">
                <el-tab-pane
                        v-for="(item, index) in items"
                        :key="item.id"
                        :label="item.title"
                        :name="item.id + ''"
                >
                    <el-button type="default" @click="edit(item)">修改列表名称</el-button>
                    <el-button type="default" @click="addArticle(item)">添加问题</el-button>
                    <el-card class="box-card" v-for="article in item.articles" :key="article.id"
                              style="margin-top: 10px;">
                        <div slot="header" class="clearfix">
                            <span>{{article.title}}</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="edit(article)">修改</el-button>
                        </div>
                        <div class="text">
                            <span v-html="article.intro"></span>
                        </div>
                    </el-card>

                </el-tab-pane>
            </el-tabs>

        </div>

        <el-dialog
                title="表单"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px">

                <el-form-item v-if="form.parent" label="所属列表">
                    <el-input v-model="form.parent.title" readonly></el-input>
                </el-form-item>

                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item v-if="form.is_category === 0" label="内容">
                    <vue-editor id="editor" v-model="form.intro" :editorToolbar="customToolbar"></vue-editor>
                </el-form-item>

            </el-form>


            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
  import { VueEditor } from 'vue2-editor';
    export default {
        props: {
            value: String
        },
      data() {
        return {
          currentTab: '0',
          items: [],
          loading: true,
          params: {
            //
          },
          form: {
            is_category: 0,
            parent: null
          },
          dialogVisible: false,

          customToolbar: [
            //[{ 'font': [] }],

            //[{ 'header': [false, 1, 2, 3, 4, 5, 6, ] }],

            //[{ 'size': ['small', false, 'large', 'huge'] }],

            ['bold', 'italic', 'underline', 'strike'],

            [{'align': ''}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],

            [{ 'header': 1 }, { 'header': 2 }],

            //['blockquote', 'code-block'],

            [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],

            //[{ 'script': 'sub'}, { 'script': 'super' }],

            [{ 'indent': '-1'}, { 'indent': '+1' }],

            [{ 'color': [] }, { 'background': [] }],

            ['link', 'video', 'formula'],

            //[{ 'direction': 'rtl' }],
            ['clean'],
          ],
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/article', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              if (this.items.length > 0) {
                if (this.currentTab == '0') {
                  this.currentTab = this.items[0].id + '';
                }
              }
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            console.log(err);
            this.$message('系统错误');
            this.loading = false;
          })
        },

        removeTab(id) {
          this.$confirm('确定要删除吗？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(() => {
                this.destroy(id);
            })
            .catch(action => {

            });
        },

        add() {
           this.dialogVisible = true;
           this.form.parent = null;
           this.form.is_category = 1;
           this.form.intro = '';
           this.form.parent_id = 0;
        },

        addArticle(parent) {
          this.dialogVisible = true;
          this.form.parent = {
            title: parent.title,
            parent_id: parent.id
          };
          this.form.is_category = 0;
          this.form.intro = '';
          this.form.parent_id = parent.id;
        },

        save() {
          if (this.form.id !== undefined) {
            this.update();
          } else {
            this.store();
          }
        },

        store() {
          axios.post('/admin/api/article', this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        update() {
          axios.put('/admin/api/article/' + this.form.id, this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        edit(item) {
          this.dialogVisible = true;
          this.form = Object.assign({}, item);
        },

        destroy(id) {
          axios.delete('/admin/api/article/' + id).then((res) => {
            if (res.data.code === 0) {
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          });

        }

      }
    }
</script>